<html>

<body>
  <div id='app'>
    <input />
    <button></button>
  </div>
  <script src="../build/reactivity.js"> </script>
  <script>
    const {effect, reactive} = Reactivity
    // 数据响应式处理
    const data = reactive({
      message: 'Hello Vue 3!!'
    })

    const button = document.querySelector('button')
    const input = document.querySelector('input')

    function update() {
      button.innerHTML = data.message
      input.value = data.message
    }

    // 将更新函数作为副作用
    effect(update)

    input.addEventListener('keyup', function () {
      data.message = this.value
    })
    button.addEventListener('click', function () {
      data.message = data.message.split('').reverse().join('')
    })
  </script>
</body>

</html>
